import React, { useState } from 'react';
import {
    Alert, Image, ScrollView, Text, TextInput, TouchableOpacity, View
} from 'react-native';
import { Header } from 'react-native-elements'; //可以用来写title
import { pxPage, throttle } from '../../common/Common';

const SearchPage = (props) => {
    const [value, onChangeText] = useState('名侦探柯南');

    return <View>
        <Header
            backgroundColor='#fea6c4'
            leftComponent={
                <TouchableOpacity
                onPress={throttle(() => {
                        props.navigation.goBack()
                    },2000)}>
                    <Image
                        source={require('../../common/icon/返回.png')}
                        style={{
                            height: pxPage(25),
                            width: pxPage(25),
                            marginLeft: pxPage(15),
                            marginTop: pxPage(5)
                        }} />
                </TouchableOpacity>

            }
            centerComponent={
                <View style={{
                    height: pxPage(40),
                    width: pxPage(265),
                    backgroundColor: 'rgba(0,0,0,0.2)',
                    borderRadius: 15,
                    color: '#fff',
                    flexDirection: 'row'
                }}>
                    {/* searchBar-input */}
                    <TextInput
                        placeholderTextColor="#fff"
                        style={{ marginLeft: pxPage(10), height: pxPage(44), color: '#fff' }}
                        placeholder={'点击搜索'}
                        clearTextOnFocus={true}
                        onChangeText={text => onChangeText(text)}
                        value={value}
                    >
                    </TextInput>

                    {/* searchBar-icon */}

                </View>
            }
            rightComponent={
                <TouchableOpacity
                    style={{
                        right: pxPage(20),
                        top: pxPage(6),
                        position: 'absolute'
                    }}
                    onPress={throttle(() => {
                        if (value == "") {
                            Alert.alert(
                                "",
                                "输入的搜索内容不能为空哦~",
                                [
                                    {
                                        text: "确定",
                                        onPress: () => console.log("ok"),
                                        style: "cancel"
                                    },
                                ]
                            );
                        } else props.navigation.navigate('SearchResult', {
                            value: value
                        })
                    }, 2000)}
                >
                    <Image
                        source={require('../../common/icon/搜索.png')}
                        style={{
                            width: pxPage(30),
                            height: pxPage(30),

                        }}
                    >
                    </Image>
                </TouchableOpacity>

            }
        />

        <ScrollView style={{ marginTop: pxPage(10), }}>
            <Text style={{ color: '#939393', marginLeft: pxPage(20) }}>最近搜索</Text>
            <View style={{
                flexDirection: "row",
                justifyContent: 'center'
            }}>

                {
                    data.slice(0, 3).map((item, index) => {
                        return <TouchableOpacity
                            key={index}
                            style={{
                                padding: pxPage(8),
                                marginBottom: pxPage(8)
                            }}>
                            <Image
                                source={{ uri: item.img }}
                                style={{
                                    width: pxPage(116),
                                    height: pxPage(161),
                                    borderWidth: 1.5,
                                    borderColor: '#F1687A',
                                    shadowColor: '#999',
                                }}
                            />
                            <Text style={{
                                fontWeight: 'bold',
                                fontSize: 15,
                                marginTop: pxPage(10)
                            }}
                            >{item.name.length <= 6 ? item.name : item.name.slice(0, 6) + '...'}</Text>
                        </TouchableOpacity>
                    })
                }

            </View>
        </ScrollView>

        <ScrollView style={{ marginLeft: pxPage(20) }}>
            <Text style={{ color: '#939393' }}>热门搜索</Text>
            <View style={{ flexDirection: "row", flexWrap: "wrap", alignItems: 'center', marginTop: pxPage(11) }}>
                {data.map((item, index) => {
                    return <TouchableOpacity style={{
                        // width: pxPage(107),
                        height: pxPage(35),
                        backgroundColor: '#ddd',
                        borderRadius: 20,
                        // alignItems:'center',
                        justifyContent: 'center',
                        marginRight: pxPage(10),
                        marginTop: pxPage(8)
                    }}>
                        <Text style={{ padding: pxPage(10) }}>{item.name}</Text>
                    </TouchableOpacity>
                })}
            </View>

        </ScrollView>
    </View>
}

export default SearchPage;

const data = [
    {
        id: "1615",
        url: "/view/1615.html",
        img: "http://p.xiaomingming.org/FileUpload/201810618424440146.jpg",
        name: "刀剑神域第三季",
        alias: "别名：刀剑神域 Alicization篇/刀剑神域UW篇/Sword Art Online第三季/SAO第三季/ソーアート・オンライン -アリシーション-",
        type: "热血 冒险 科幻 ",
        synopsis: "47全集",
        years: "2018",
        region: "日本",
        lndexes: "动漫",
        label: "日语",
        num: 50,
        introduction: "《刀剑神域第三季》讲述桐人将自己在ALO里的游戏转移到GGO里后，虽然遇上了乍看之下很容易被误认为是美少女角色的麻烦，但在经过狙击手少女诗乃的引导之后，顺利参加了决定最强枪手的PvP淘汰赛BoB（Bullet of Bullets）。桐人在这个被枪支配的世界里，成为了唯一使用光剑战斗，并不断在BoB里获胜的知名角色。他独特的战斗方式成为了玩家间讨论的焦点，知名度也不断上升。",
        numhas: 50
    },
    {
        id: "189",
        url: "/view/189.html",
        img: "http://pic.xiaomingming.org/FileUpload/2050.jpg",
        name: "海贼王",
        alias: "别名：海盗路飞/航海王/One Piece",
        type: "热血 搞笑 冒险 ",
        synopsis: "更新至966话，每周日中午更新中文字幕",
        years: "1999",
        region: "日本",
        lndexes: "动漫",
        label: "日语",
        num: 966,
        introduction: "《海贼王》讲述传奇海盗哥尔D罗杰在临死前曾留下关于其毕生的财富One Piece的消息，由此引得群雄并起，众海盗们为了这笔传说中的巨额财富展开争夺，各种势力、政权不断交替，整个世界进入了动荡混乱的大海贼时代。生长在东海某小村庄的路飞受到海贼香克斯的精神指引，决定成为一名出色的海盗。为了达成这个目标，并找到万众瞩目的One Piece，路飞踏上艰苦的旅程。一路上他遇到了无数磨难，也结识了索隆、娜美、乌索普、香吉、罗宾等一众性格各异的好友。他们携手一同展开充满传奇色彩的大冒险",
        numhas: 966
    },
    {
        id: "2",
        url: "/view/2.html",
        img: "http://pic.xiaomingming.org/FileUpload/2015122620365680673.jpg",
        name: "苍之彼方的四重奏",
        alias: "别名：苍蓝彼方的四重奏/4rhythm/蒼の彼方のフォーリム",
        type: "爱情 校园 ",
        synopsis: "12全集",
        years: "2016",
        region: "日本",
        lndexes: "动漫",
        label: "日语",
        num: 12,
        introduction: "《苍之彼方的四重奏》讲述改编自日本游戏公司Sprite继《恋爱与选举与巧克力》又一部动画化作品，故事发生在一个人类可以自由自在地翱翔于天际，甚至比骑自行车还要简单的普通世界。在那里，流行着一种名为飞翔马戏团(Flying Circus)的运动，而曾被视为该项运动的未来之星、被寄予厚望的天才少年日向晶也，因为某一次压倒性的败北，而选择默默地离开了空中竞技的赛场。但是，在他与突然转校而来的仓科明日香邂逅以后，他的心中又重新燃起了炙热的感觉，于是一场关于努力挥洒热血、释放青春汗水的恋爱物语就此开启了。",
        numhas: 12
    },
    {
        id: "209",
        url: "/view/209.html",
        img: "http://pic.xiaomingming.org/FileUpload/2048.jpg",
        name: "名侦探柯南",
        alias: "别名：名探侦コナン Detective Conan",
        type: "推理 刑侦 剧情 ",
        synopsis: "更新至1058话，每周六19:30更新一集",
        years: "1996",
        region: "日本",
        lndexes: "动漫",
        label: "日语",
        num: 1058,
        introduction: "《名侦探柯南》讲述人称日本警察之救世主的高中生侦探工藤新一在与青梅竹马毛利兰去游乐园游玩时，不经意地发现行踪可疑的黑衣人。工藤新一于是尾随跟踪，并目睹了黑衣人正在进行可疑交易。不料，却被另一名黑衣人在背后击晕，并被强行灌下一种名为APTX-4869的毒药，致使身体变小。为了不让身边的人受到波及，工藤 新一不得已隐藏了自己还活着的事实。在情急之下，工藤新一受到《福尔摩斯》的作者阿瑟柯南道尔和江户川乱步名字的启发，改名为江户川柯南。为了在不暴露真实身份的情况下调查黑衣人的下落，工藤新一便寄住在毛利兰的家中，想借助以侦探为职业的毛利兰的父亲毛利小五郎来找寻黑衣组织。不料，毛利小五郎经常做一些发育不良的错误推理。作为侦探，柯南实在看不下去，帮助小五郎大叔破了许多案子，大叔得以名声大震，成为沉睡的小五郎，并继续追踪黑衣人及其成员。",
        numhas: 1058
    },
    {
        id: "290",
        url: "/view/290.html",
        img: "http://pic.xiaomingming.org/FileUpload/20169262242263667.jpg",
        name: "一拳超人第二季",
        alias: "别名：一击男第二季/ワンンマン2期",
        type: "科幻 奇幻 热血 动作 ",
        synopsis: "12全集",
        years: "2019",
        region: "日本",
        lndexes: "动漫",
        label: "日语",
        num: 18,
        introduction: "《一拳超人第二季》讲述改编自ONE原作、村田雄介作画的漫画作品，将于2017年春播出第二季。《一拳超人》讲述的是主人公埼玉原本是一名整日奔波于求职的普通人。3年之前的一天偶然遇到了要对淘气少年下杀手的异变螃蟹人后，回忆起年少年时想要成为英雄的梦想，最终拼尽全力救下了淘气少年。重拾对于成为英雄的兴趣之后，通过拼命锻炼，埼玉终于脱胎换骨获得了最强的力量，但同时失去了头发成了光头，似乎还失去了某些感情。 在独自做了一段时间英雄后，与弟子杰诺斯一起，正式加入英雄协会，与众多英雄一起开始了对抗各种怪人以及灾难的生活。不过经常是在无人知晓的情况下做英雄的工作。",
        numhas: 18
    },
    {
        id: "3",
        url: "/view/3.html",
        img: "http://pic.xiaomingming.org/FileUpload/3.jpg",
        name: "传颂之物：虚伪的假面",
        alias: "别名：うたわれるもの 偽りの仮面",
        type: "战争 冒险 奇幻 后宫 ",
        synopsis: "26全集",
        years: "2015",
        region: "日本",
        lndexes: "动漫",
        label: "日语",
        num: 26,
        introduction: "《传颂之物：虚伪的假面》讲述一位男子突然在大雪覆盖的深山中醒来，却发现自己没有记忆。他徘徊在深山中，被长着巨型牙齿的生物袭击、深夜被异形追赶，在千钧一发的时候一位美少女向他伸出援手，故事由此开始",
        numhas: 26
    }, {
        id: "209",
        url: "/view/209.html",
        img: "http://pic.xiaomingming.org/FileUpload/2048.jpg",
        name: "名侦探柯南",
        alias: "别名：名探侦コナン Detective Conan",
        type: "推理 刑侦 剧情 ",
        synopsis: "更新至1058话，每周六19:30更新一集",
        years: "1996",
        region: "日本",
        lndexes: "动漫",
        label: "日语",
        num: 1058,
        introduction: "《名侦探柯南》讲述人称日本警察之救世主的高中生侦探工藤新一在与青梅竹马毛利兰去游乐园游玩时，不经意地发现行踪可疑的黑衣人。工藤新一于是尾随跟踪，并目睹了黑衣人正在进行可疑交易。不料，却被另一名黑衣人在背后击晕，并被强行灌下一种名为APTX-4869的毒药，致使身体变小。为了不让身边的人受到波及，工藤 新一不得已隐藏了自己还活着的事实。在情急之下，工藤新一受到《福尔摩斯》的作者阿瑟柯南道尔和江户川乱步名字的启发，改名为江户川柯南。为了在不暴露真实身份的情况下调查黑衣人的下落，工藤新一便寄住在毛利兰的家中，想借助以侦探为职业的毛利兰的父亲毛利小五郎来找寻黑衣组织。不料，毛利小五郎经常做一些发育不良的错误推理。作为侦探，柯南实在看不下去，帮助小五郎大叔破了许多案子，大叔得以名声大震，成为沉睡的小五郎，并继续追踪黑衣人及其成员。",
        numhas: 1058
    },
]